<template>
  <div class="data-view">
    <el-card>
      <div id="main1"></div>
    </el-card>
    <el-card>
      <div id="main2"></div>
    </el-card>
  </div>
</template>

<script setup>
import echarts from 'echarts'
import { dataView } from '@/api/api'
import { onMounted } from 'vue'

let draw = (legend, xAxis, series) => {
  let myChart1 = echarts.init(document.getElementById('main1'))
  let option = {
    title: {
      text: 'Gremlin'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: { data: legend },
    xAxis: {
      type: 'category',
      data: xAxis
    },
    yAxis: {},
    series: series
  }
  myChart1.setOption(option)
}

dataView().then(res => {
  if (res.data.status === 200) {
    let { legend, xAxis, series } = res.data.data
    draw(legend, xAxis, series)
  }
}).catch(err => {
  throw err
})

onMounted(() => {
  let myChart = echarts.init(document.getElementById('main2'))
  myChart.setOption({
    title: { text: 'Gremlin - 小鬼班' },
    xAxis: {
      data: ['一班', '二班', '三班', '四班']
    },
    yAxis: {},
    series: [{
      name: '人数',
      type: 'bar',
      data: [33, 24, 56, 38]
    }]
  })
})
</script>

<style lang="less">
.data-view {
  display: flex;
  width: 100%;
  height: 500px;
  flex-direction: row;
  .el-card {
    width: 50%;
    margin-top: 20px;
    #main1,
    #main2 {
      height: 450px;
      text-align: center;
    }
  }
}
</style>